<template>
  <div class="w-100 h-100">
    <div
      style="width: 100%; height: 10%; position: absolute; top: 0; right: 0"
      class="d-flex justify-content-end"
    >
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="baseList.map((item) => `rgba(${item.color}, 1)`)"
        :text="baseList.map((item) => item.name)"
      >
      </FakeLegend>
    </div>
    <div class="w-100 h-100 xjwt-box">
      <div class="h-100" style="width: 100%" id="xjwt"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";
import {useFunc} from "@/hook/useFunc";

const baseList = [
  {
    name: "火灾隐患",
    color: "89,219,248",
  },
  {
    name: "水灾隐患",
    color: "184,235,143",
  },
  {
    name: "安全隐患",
    color: "254,126,29",
  },
  {
    name: "通信隐患",
    color: "251,216,160",
  },
];

let option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      fontSize: 20,
      color: "#fff",
    },
  },
  dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                bottom: "18%",
                end: 60
            }
        ],
        grid : {
            bottom: "15%",
          },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      axisLabel: {
        // 调整标签样式，确保换行显示不会导致标签相互重叠
        textStyle: {
          fontSize: 20, // 调整字体大小适应空间
          lineHeight: 18, // 设置行高以适应多行文本
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      data: useOptions().month,
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        // 配置分割线
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
    },
  ],

  series: baseList.map((item) => ({
    name: item.name,
    type: "bar",
    barGap: "20%",
    emphasis: {
      focus: "series",
    },
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: `rgba(${item.color}, 1)`,
        },

        {
          offset: 1,
          color: `rgba(${item.color}, 0)`,
        },
      ]),
    },
    data: [],
  })),
};

const list: any = ref([]);

const props = defineProps({
  year: {
    default: 2024,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [[], [], [], []];
  try {
    data = jsonData.value.underJsc.xjwt[props.year];
  } catch (error) {}

  return data;
});
let myChart: any;
watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [
          { data: val[0] },
          { data: val[1] },
          { data: val[2] },
          { data: val[3] },
        ],
      });
    }
  }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("xjwt") as HTMLElement);

  myChart.setOption(option);

  const scrollContainer = document.querySelector(".xjwt-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>
